Курс по ES 6 (EcmaScript 6) для веб-разработчиков 2017
Данный курс по es6 предназначен для тех, кто хочет следовать современным трендам веб-разработки. Речь идет о новой спецификации языка javascript – es6 (ecmascript 6).
Данная спецификация привнесла большое количество нововведений в язык, которые мы с вами подробно будем рассматривать в этом курсе.
Мы начнем с настройки окружения с помощью webpack, для того, чтобы компилировать язык в старую спецификацию es5, для того, чтобы люди, работающие в старых бразуерах могли пользоваться тем функционалом, что мы напишем. Ну а если вы работаете в современных браузерах, то у вас все будет поддерживаться нативно.
После, мы разберем все функции, которые нам привнес es6, начиная от переменных и классов, и заканчивая промисами и генераторами.
Также мы разберем как преобразуются некоторые фичи es6 в es5 и реализуем несколько из них, чтобы понимать, как оно работает.

Урок 1. ES6 (EcmaScript 6). Настройка окружения:
От автора: с этого урока мы с вами начнем изучать новый синтаксис языка javascript — es6 (ecmascript 6). Так как еще не все браузеры его поддерживают нативно, то мы начнем с настройки окружения, где разберем как с помощью webpack компилировать es6 в es5.
Из урока вы узнаете, как с помощью webpack и babel-loader можно компилировать синтаксис es6 в es5 для того, чтобы все браузеры понимали, что мы написали.
В результате урока мы настроим webpack таким образом, чтобы он корректно преобразовывал нам es6 в es5.


Урок 2. ES6 (EcmaScript 6). Переменные:
От автора: в этом уроке мы поговорим про то, какие появились новые способы создания переменных в es6 (ecmascript 6).
Из урока вы узнаете о новых способах создания переменных в ecmascript 6 (es6) — let и const. Вы увидите наглядное различие между старым способом объявления переменных с помощью ключевого слова var и новым способом, с помощью ключевого слова let на нескольких практических примерах.
Также мы поговорим про то, какие есть тонкости при создания переменных с помощью ключевого слова const.


Урок 3. ES6 (EcmaScript 6). Стрелочные функции:
От автора: в этом уроке мы познакомимся с одним из самых главным и часто используемым нововведением в es6 (ecmascript 6) — со стрелочными функциями.
Из урока вы узнаете, что такое стрелочные функции, и чем они отличаются от обычных функций. Вы узнаете все возможные способы записей данных конструкций для того, чтобы эффективно сокращать код ваших скриптов.
Помимо синтаксиса мы разберем особенности работы данных функций с контекстом на практическом примере.


Урок 4. ES6 (EcmaScript 6). Параметры по умолчанию:
От автора: в этом уроке мы познакомимся со следующим очень полезным нововведением в es6 (ecmascript 6) — способ передачи параметров по умолчанию в функцию.
Из урока вы узнаете, как задавать параметры по умолчанию в функции, то есть если параметр, который нужен в функции не был явно передан, то будет использоваться какое-то определенное заданное значение, для того, чтобы код не выдавал ошибку и все работало корректно.
Вы наглядно увидите, как это делалось раньше, и чем старых подход отличается от нового. Также мы разберем все возможные ситуации, как можно определить параметры по умолчанию в функцию.


Урок 5. ES6 (EcmaScript 6). Объекты:
От автора: в этом уроке мы разберем все новые пункты, которые появились в синтаксисе es6 (EcmaScript 6) для более удобной записи объектов.
Из урока вы узнаете все возможные варианты новой записи объектов. Вы познакомитесь с сокращенной записей ключей, функций и динамическим созданием ключей объекта.
В результате урока мы напишем функцию, на примере которой рассмотрим все эти возможности.


Урок 6. ES6 (EcmaScript 6). Деструктуризация:
От автора: в этом уроке мы разберем такое понятие как деструктуризация в es6 (EcmaScript), которая часто сильно сокращает код.
Из урока вы узнаете, что такое деструктуризация и зачем она нужна.
В результате урока мы разберем 2 ситуации, когда применима деструктуризация — на примере объектов и массивов.


Урок 7. ES6 (EcmaScript 6). Rest и Spread операторы:
От автора: в новый синтаксис javascript были введены 2 очень похожих, но при этом разных операторов, которые позволяют удобно работать с массивами. Это операторы rest и spread.
Из урока вы узнаете, что такое rest и spread операторы в es6 (EcmaScript 6). Вы поймете, чем они отличаются и когда стоит тот или иной применять.
В результате урока мы разберем 2 случая, когда применяется Rest оператор, а когда spread.


Урок 8. ES6 (EcmaScript 6). Строки:
От автора: новый синтаксис javascript предоставляет нам удобные возможности для работы со строками, например, со встроенной шаблонизацией в es6 (EcmaScript 6).
Из урока вы узнаете новые возможности для работы со строками в es6 синтаксисе.
В результате урока мы разберем эту новую возможность и сравним со старыми подходами, а также, как они взаимодействуют между собой.


Урок 9. ES6 (EcmaScript 6). Циклы:
От автора: в этом уроке мы с вами познакомимся с новым видом циклов, которые появились в es6 (EcmaScript 6).
Из урока вы узнаете, какое ключевое слово появилось в es6 для задания нового цикла, который является более удобной версией цикла for.
В результате урока мы рассмотрим практически все возможные варианты итерации массивов, поговорим про их удобство, и еще напишем итератор для строк, используя новый вид цикла.


Урок 10. ES6 (EcmaScript 6). Классы:
От автора: в этом уроке мы с вами увидим, как преобразился синтаксис для ООП в es6 (EcmaScript 6).
Из урока вы узнаете, какие ключевые слова и конструкции появились в es6. Для работы с классами, наследованием и в целом ООП.
В результате урока мы напишем простой класс, используя старый синтаксис, а потом напишем тоже самое, но уже используя новый синтаксис, и на этом примере увидим разницу.


Урок 11. ES6 (EcmaScript 6). Set и WeakSet:
От автора: помимо новых синтаксических конструкций es6 привнес некоторые структуры данных, которые очень удобно позволяют работать с данными, которые мы начнем рассматривать, начиная с этого урока.
Из урока вы узнаете, что такое Set и WeakSet в es6.
В результате урока мы разберем все основные методы и способы создания данных массивоподобных элементов, разберем в чем их существенное отличием от массивов и других структур данных, типа Map.


Урок 12. ES6 (EcmaScript 6). Map и WeakMap:
От автора: в этом уроке мы продолжим изучение новых структур данных и в этот раз поговорим про объектоподобные структуры map и weakmap в es6 (EcmaScript 6).
Из урока вы узнаете, что такое объектоподобные структуры данных — Map и WeakMap.
В результате урока мы разберем все возможности и методы для работы с Map объектами, и рассмотрим 2 способа создания данных объектов.


Урок 13. ES6 (EcmaScript 6). Система модулей.Модули:
От автора: в этом уроке мы с вами разберем систему модулей, которая появилась в es6 (EcmaScript). Она предназначена для нативной декомпозиции модулей на javascript, которая сильно облегчает задачу определения зависимостей.
Из урока вы узнаете, как работать с нативными es6 модулями. Вы узнаете все возможные варианты связи модулей и научитесь ими пользоваться. В уроке будут разобраны такие новые ключевые слова как export import as from default.
В результате урока мы создадим 2 модуля, и рассмотрим на их примере как всеми возможными вариантами их можно связать.


Урок 14. ES6 (EcmaScript 6). Символы:
От автора: в этом уроке мы познакомимся с седьмым, новым типом данных в javascript, который привнес es6 (EcmaScript 6) в язык.
Из урока вы узнаете, что такое символы и как их создавать. Вы узнаете зачем они используется и в чем их особенность, как нового типа данных. Вы увидите, как можно создавать собственные символы, и узнаете какие есть фиксированные, зарезервированные символы в самом языке.
В результате урока мы с вами разберем, в каких объектах уже есть символы итераторы, как работает цикл for of, напишем свою собственную функцию, которая будет делать тоже самое что и цикл. А в конце урока мы напишем реализацию функции генерации последовательности Фибоначчи, используя символы.


Урок 15. ES6 (EcmaScript 6). Генераторы:
От автора: в этом уроке мы познакомимся с новым видом функций, которые появились в es6 (EcmaScript 6) стандарте — с генераторами, которые позволяют очень удобно генерировать данные, или работать с асинхронным кодом.
Из урока вы узнаете, что такое функции-генераторы в es6 и как ими пользоваться. Вы узнаете, как их создавать, их специальный синтаксис и новое ключевое слово yield. На реальном примере вы увидите, как можно создавать генератор внутри генератора для разных типов данных.
В результате урока мы на разных примерах увидим использование генераторов, и создадим 2 функции: одна функция, для создания чисел внутри заданного диапазона, и другую для генерации последовательности Фибоначчи из прошлого урока, но уже используя генераторы, чтобы увидеть, как сильно они могут упростить разработку и уменьшить количество кода.


Урок 16. ES6 (EcmaScript 6). Новые методы:
От автора: помимо нового синтаксиса и нового функционала es6 (EcmaScript 6) привнес в язык Javascript новые методы у разных типов данных, основные из которых мы рассмотрим в данном уроке.
Из урока вы узнаете, какие новые методы появились у встроенных типов данных в javascript. Мы разберем некоторые методы строк, массивов и объектов, для более эффективной работы.
В результате урока вы увидите, как с помощью нативных методов, можно реализовать некоторые задачи, без привлечения на проект сторонних библиотек.


Урок 17. ES6 (EcmaScript 6). Promise:
От автора: в этом заключительном уроке мы разберем новую структуру данных, которой так не хватало в javascript. Речь идет о промисах в es6 (EcmaScript 6) — конструкции, которая очень удобно позволяет работать с асинхронным кодом.
Из урока вы узнаете, что такое Promise, как с ними работать и зачем они нужны. Вы узнаете, почему стоит использовать именно их, а не большое дерево колбэков.
В результате урока мы напишем 2 наглядных примера по использованию промисов. Первый пример это функция задержки, которая будет реализована без промисов и с ними, чтобы увидеть разницу. А второй пример будет рассматривать ситуацию удаленного запроса на сервер, где мы посмотрим, как с помощью промисов можно удобно трансформировать данные и отлавливать ошибки.